import { SlideRef } from "@shared/slide";
import React, { useState } from "react";
import styles from "@styles/personal.module.less";
import Header from "@shared/header";
import GeekIcon from "@shared/geekIcon";
import Textarea from "react-textarea-autosize";
import { useUpdateProfileMutation } from "@service/userEndpoints";
import toast from "react-hot-toast";

interface Props {
  intro: string;
  slideRef: React.RefObject<SlideRef | null>;
}

export default function UpdateIntro({ intro, slideRef }: Props) {
  const [text, setText] = useState(() => (intro === null ? "" : intro));
  const [updateProfile] = useUpdateProfileMutation();
  return (
    <div className={styles.content}>
      <Header
        title={"编辑简介"}
        left={
          <GeekIcon
            type={"iconfanhui"}
            className={styles.icon}
            onClick={slideRef.current?.close}
          />
        }
        right={
          <button
            className={styles.submit}
            onClick={() => {
              updateProfile({ intro: text })
                .unwrap()
                .then(() => {
                  toast.success("用户简介修改成功");
                  slideRef.current?.close();
                });
            }}
          >
            提交
          </button>
        }
      />
      <form>
        <div className={styles.bg}>
          <Textarea
            className={styles.textarea}
            value={text}
            onChange={(event) => {
              const value = event.target.value;
              if (value.length <= 100) {
                setText(event.target.value);
              }
            }}
          ></Textarea>
          <div className={styles.count}>{text.length}/100</div>
        </div>
      </form>
    </div>
  );
}
